import React from "react";
import {Col, Media, Row} from "reactstrap";

class Location extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.data
        }
    }

    handleInput = e => {
        this.setState({
            value: e.target.value
        });
        this.props.setEventEditData(this.props.constant, e.target.value);
    };

    render() {

        const data = this.props.data;
        const from = this.props.from;
        const itemId = this.props.id;
        const itemClass = this.props.class;
        const editStatus = this.props.editStatus;

        return (
            <Media>
                <Media body className="overflow-hidden">
                    <Row>
                        <Col md={3} className={itemId !== 3 ? "align-self-center" : ''}>
                            <span className="event-content-list-name">{from}</span>
                        </Col>
                        <Col md={9}>
                            {!editStatus ? (
                                <div className={`event-content-list-item ${itemClass || ''}`}>
                                    {data}
                                </div>
                            ) : (
                                <this.props.typeInput
                                    onChange={this.handleInput}
                                    value={this.state.value || ''}
                                    className={`event-content-list-item event-input-edit ${itemClass || ''}`}
                                />
                            )}
                        </Col>
                    </Row>
                </Media>
            </Media>
        )
    }
}

export default Location;